<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Majestic Login</title>
       <!--引用css/bootstrap.min.css -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>

    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .login-container {
            width: 360px;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            background-color: white;
        }
        .logo-img {
            width: 120px;
            height: auto;
            margin-bottom: 1rem;
        }
        .form-control {
            padding: 0.75rem;
            margin-bottom: 1rem;
        }
        .btn-signin {
            background-color: #4e73df;
            color: white;
            width: 100%;
            padding: 0.75rem;
            border: none;
        }
        .btn-facebook {
            background-color: #3b5998;
            color: white;
            width: 100%;
            padding: 0.75rem;
            border: none;
            margin-top: 1rem;
        }
        .keep-signed {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1rem 0;
            font-size: 0.9rem;
        }
        .create-account {
            text-align: center;
            margin-top: 1rem;
            font-size: 0.9rem;
        }
        h4 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        p {
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-container">
            <div class="text-center">
                <img src="{% static '/images/logo.png' %}" alt="Majestic Logo" class="logo-img">
            </div>
            <!-- <h4 class="text-center">Hello! let's get started</h4>
            <p class="text-center text-muted mb-4">Sign in to continue.</p> -->

            <form action="#">
                <div class="mb-3">
                    <input type="text" class="form-control" v-model="loginForm.username" placeholder="请输入用户名">
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" v-model="loginForm.password" placeholder="请输入密码">
                </div>

                <div class="keep-signed">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" v-model="keepSignedIn" id="keepSignedIn">
                        <label class="form-check-label" for="keepSignedIn">
                            保持登录状态
                        </label>
                    </div>

                </div>

                <button type="button" @click="login()" class="btn btn-signin">登  录</button>


            </form>

        </div>
    </div>

    <script>
        const { createApp,ref,reactive} = Vue;
        const app = createApp({
            setup() {
            //绑定表单数据
                const loginForm = reactive({
                    username: '',
                    password: ''
                });
                const keepSignedIn = ref(false);
                // 登录操作
                const login = () => {
                    //判断字段不能为空
                    if (loginForm.username.trim() === '' || loginForm.password.trim() === '') {
                        alert('用户名或密码不能为空');
                        return;
                    }
                    //发送登录请求
                    axios.post('/api/sys/user/login/', loginForm)
                        .then(response => {
                            console.log("response.data",response.data);
                            if(response.data.code === 200){
                                alert('登录成功');
                                // 跳转到主页 /blog/to_ai_menu/
                                window.location.href = '/page/sys/menu/to_menu_bar/';
                                  //window.location.href = '/blog/to_ai_menu/';                            return;
                            }else{
                                alert('登录失败');
                            }

                        })
                        .catch(error => {
                            alert('登录失败');
                        });

                }
                return {
                    loginForm,
                    keepSignedIn,
                    login
                };
            }
        });
        //挂载应用
        app.mount('#app');
    </script>
</body>
</html>
